<!--  -->
<template>
    <div>
        <!-- 支付宝绑定弹窗 -->
        <Modal
            :value="show"
            width="840"
            class="er-modal er-modal-eleAliPay"
            :closable="false"
            :mask-closable="false"
            @on-visible-change="setVisibility">

            <span class="c-modal__close--outside" @click="setVisibility(false)">
                <Icon type="close"></Icon>
            </span>

            <!-- 进度条 -->
            <div class="er-header" slot="header">
                <ol class="er-header__list">
                    <li class="er-header__item" v-for="(item, key) in items" :key="key">
                        <a href="javascript:void 0" :class="{
                            'er-header__box': true,
                            'is-active': step >= key
                        }">{{item}}</a>
                    </li>
                </ol>
                <div class="er-header__back" :style="{width: backWidth}"></div>
            </div>

            <!-- 绑定swiper步骤 -->
            <Carousel v-model="step" dots="none" arrow="never" v-if="show">

                <!-- 选择账户类型 -->
                <CarouselItem>
                    <div class="er-carousel">
                        <h2>
                            {{this.branchId ? '门店:' + $route.query.branchName : ''}}
                            选择账户类型
                        </h2>
                        <div class="er-account-type">
                            <RadioGroup :value="accountType">
                                <!-- <Radio :label="1">个人用户</Radio> -->
                                <Radio :label="2">企业用户</Radio>
                            </RadioGroup>
                        </div>
                        <div class="er-detail">
                            <p>
                                <strong>请准备以下资料:</strong>
                            </p>
                            <ul class="er-required-list" v-show="accountType === 2">
                                <li>1.企业营业执照  <span @click="showImg">查看示例</span></li>
                                <li>2.法人签名</li>
                                <li>3.支付宝授权appid <span><a target="_blank" href="/v3/file/111?name=支付宝应用开通流程.docx">如何获取appid?</a></span></li>
                            </ul>
                        </div>
                    </div>
                </CarouselItem>

                <!-- 提交资料和文件 -->
                <CarouselItem>
                    <div class="er-carousel">
                        <h2>提供资料和文件</h2>
                        <Form
                            style="padding: 0 20px"
                            ref="company"
                            :model="audit_params"
                            :rules="companyRules"
                            label-position="left"
                            :label-width="150"
                            :show-message="false">
                            <FormItem label="公司名称:" prop="company_name">
                                <i-input v-model.trim="audit_params.company_name"></i-input>
                            </FormItem>

                            <FormItem label="营业执照编号:" prop="trading_no">
                                <i-input v-model.trim="audit_params.trading_no"></i-input>
                            </FormItem>

                            <FormItem label="纳税识别号:" prop="tax_no">
                                <i-input v-model.trim="audit_params.tax_no"></i-input>
                            </FormItem>

                            <FormItem label="公司地址:" prop="company_address">
                                <i-input v-model.trim="audit_params.company_address"></i-input>
                            </FormItem>

                            <FormItem label="营业执照照片:" prop="trading_img">
                                <c-upload v-model="audit_params.trading_img"></c-upload>
                            </FormItem>

                            <FormItem label="公司法人签字扫描件:" prop="legal_sign_img">
                                <c-upload v-model="audit_params.legal_sign_img"></c-upload>
                            </FormItem>
                        </Form>
                    </div>
                </CarouselItem>

                <!-- 账户配置 -->
                <CarouselItem>
                    <div class="er-carousel">
                        <h2 class="margin-bottom-20">缴费账户设置</h2>
                        <Form
                            style="padding: 0 20px"
                            ref="acount"
                            :model="audit_params"
                            :rules="accountRules"
                            label-position="left"
                            :label-width="170"
                            :show-message="false">

                            <FormItem label="支付宝商户号:" prop="alipay_account">
                                <i-input v-model.trim="audit_params.alipay_account"></i-input>
                            </FormItem>

                            <FormItem label="支付宝开放平台appid:" prop="alipay_appid">
                                <i-input v-model.trim="audit_params.alipay_appid"></i-input>
                            </FormItem>

                            <FormItem label="支付宝公钥:" prop="public_key">
                                <i-input v-model.trim="audit_params.public_key"></i-input>
                            </FormItem>

                            <FormItem label="支付宝私钥:" prop="private_key">
                                <i-input v-model.trim="audit_params.private_key"></i-input>
                            </FormItem>

                             <FormItem label="支付宝应用公钥:" prop="alipay_public_key">
                                <i-input v-model.trim="audit_params.alipay_public_key"></i-input>
                            </FormItem>

                        </Form>
                    </div>
                </CarouselItem>

                <CarouselItem>
                    <div class="er-carousel">
                        <h2 class="margin-bottom-20">商户身份验证</h2>
                        <div class="margin-bottom-20">
                            商户手机号：{{clientPhone}}
                        </div>
                        <div class="margin-bottom-20">
                            图形验证码：
                            <captcha v-if="show && showCaptcha" :reset="reset" @on-success="handleCaptcha" class="ri-captcha" style="width:auto"></captcha>
                            <i-button icon="refresh" v-show="captchaResult" @click="refreshCaptcha"></i-button>
                        </div>
                        <div class="margin-bottom-20">
                            短信验证码： <i-input style="width:200px" v-model="msg_code"></i-input>
                            <i-button :loading="loading" @click="handleSmsCode" :disabled="second !== 0 || loadingSms">{{second ? `${second}秒后可再次发送` : '发送验证码'}}</i-button>
                        </div>
                    </div>
                </CarouselItem>

                <CarouselItem>
                    <div class="end">
                        配置成功
                    </div>
                </CarouselItem>

            </Carousel>

            <!-- 弹窗尾部 -->
            <Row slot="footer">
                <Button type="text" @click="prev(step)">{{prevButtonName}}</Button>
                <Button type="primary" @click="next(step)" v-if="step<4" :loading="submiting">{{nextButtonName}}</Button>
            </Row>

        </Modal>

        <!-- 营业执照展示 -->
        <Modal
            footer-hide
            :value="imgShow"
            title="营业执照复印件"
            width="700"
            @on-visible-change="imgShowChange">
            <img src="/static/img/license.png" alt="营业执照复印件">
        </Modal>
    </div>
</template>

<script>
import validate from '@/libs/validate.js'
import CUpload from '@/components/upload/upload'
import { http, api } from '@/libs/http'
import captcha from '@/views/captcha'

export default {
  data () {
    return {
      loadingSms: false,
      timer: null, // 倒计时
      second: 0, // 多少秒之后能再次点击发送短信验证码
      loading: false, // 是否正在加载
      captchaResult: '', // 螺丝帽验证码
      code: '', // 短信验证码
      reset: false, // 是否重置螺丝帽验证码
      items: ['选择账户类型', '提交资料及文件', '缴费账户设置', '商户身份认证', '配置完成'],
      submiting: false,
      step: 0,
      accountType: 2, // 个人账号类型
      imgShow: false, // 图片弹窗
      msg_code: '',
      audit_params: {
        account_type: 2,
        alipay_account: '', // 支付宝商户号
        alipay_appid: '', // 支付宝app id
        private_key: '', // 支付宝私钥匙
        public_key: '',
        alipay_public_key: '', // 支付宝应用公钥
        tax_no: '', // 纳税识别号
        trading_no: '', // 营业执照编号
        company_name: '', // 公司名字
        company_address: '', // 公司地址
        trading_img: { id: '', name: '' }, // 营业执照扫描件
        legal_sign_img: { id: '', name: '' } // 公司法人签字扫描件
      },
      companyRules: {
        tax_no: { required: true },
        trading_no: { required: true },
        company_name: { required: true },
        company_address: { required: true },
        trading_img: {
          required: true,
          validator: validate.validFileObject
        },
        legal_sign_img: {
          required: true,
          validator: validate.validFileObject
        }
      },
      accountRules: {
        alipay_account: { required: true },
        alipay_appid: { required: true },
        private_key: { required: true },
        alipay_public_key: { required: true },
        public_key: { required: true }
      },
      showCaptcha: true
    }
  },

  props: {
    show: {
      required: true,
      type: Boolean
    },
    clientPhone: [Number, String],
    branchId: [Number, String]
  },

  components: {
    CUpload,
    captcha
  },
  watch: {
    show (n) {
      if (n) {
        this.reset = false
      } else {
        this.reset = true
        this.captchaResult = ''
        this.step = 0
        this.$refs['acount'] && this.$refs['acount'].resetFields()
        this.$refs['company'] && this.$refs['company'].resetFields()
      }
    }
  },
  computed: {
    backWidth () {
      return (this.step + 1) * 20 + '%'
    },
    prevButtonName () {
      if (this.step === 0) {
        return '取消'
      } else if (this.step === 4) {
        return '确定'
      }
      return '上一步'
    },
    nextButtonName () {
      switch (this.step) {
        case 0:
          return '下一步'
        case 1:
          return '下一步'
        case 2:
          return '下一步'
        case 3:
          return '提交'
        default:
          return '如何配置商户号'
      }
    }
  },

  methods: {
    /**
         * 打开或者关闭弹窗
         */
    setVisibility (val) {
      this.$emit('update:show', val)
    },
    handleCaptcha (res) {
      this.captchaResult = res
    },
    refreshCaptcha () {
      this.captchaResult = ''
      this.showCaptcha = false
      this.$nextTick(() => {
        this.showCaptcha = true
      })
    },
    handleSmsCode () {
      if (this.loadingSms) return
      this.loadingSms = true
      if (!this.captchaResult) {
        this.$Message.error('请先完成图形验证!')
        return
      }
      const params = {
        captcha_code: this.captchaResult
      }

      http.request(this, api.sms, null, params, (res, err) => {
        this.loadingSms = false
        if (err || !res) {
          return
        }
        this.startCountDown()
      })
    },
    startCountDown () {
      this.second = 60
      this.loading = true
      this.timer = setInterval(() => {
        this.second--
        if (this.second === 0) {
          clearInterval(this.timer)
          this.loading = false
          this.timer = null
        }
      }, 1000)
    },
    /**
         * 用于点击弹窗尾部第一个按钮
         */
    prev (step) {
      if (step === 0 || step === 4) {
        this.setVisibility(false)
        this.step = 0
        return
      }
      this.step--
    },

    /**
         * 用户点击弹窗第二个按钮
         */
    next (step) {
      if (step === 3) {
        this.submit()
      } else if (step === 2) {
        this.checkAccount()
      } else if (step === 1) {
        this.checkForm()
      } else {
        this.step++
      }
    },

    /**
         * 检查表单数据
         */
    checkForm () {
      this.$refs['company'].validate(valid => {
        if (!valid) {
          this.$Message.error('请完整填写表单数据!')
        } else {
          this.step++
        }
      })
    },

    /**
         * 检查表单数据
         */
    checkAccount () {
      this.$refs['acount'].validate(valid => {
        if (!valid) {
          this.$Message.error('请完整填写表单数据!')
        } else {
          this.step++
        }
      })
    },

    submit () {
      if (!this.msg_code) {
        this.$Message.error('请输入短信验证码!')
      } else {
        this.submitHttp()
      }
    },

    /**
         * 发送到后台进行校验
         */
    submitHttp () {
      this.submiting = true
      const params = {
        audit_type: 2,
        msg_code: this.msg_code,
        audit_params: {
          ...this.audit_params,
          belongs_to: this.branchId ? 'branch' : 'client'
        }
      }
      if (this.branchId) Object.assign(params, { branch_id: this.branchId })

      http.request(this, api.audit_create, null, params, (res, err) => {
        this.submiting = false
        if (err) {
          return
        }
        this.step++
        this.$emit('refresh')
        if (this.branchId) this.$router.push('/stores/index')
        else this.$router.push('/fund/account_information')
      })
    },

    /**
         * 图片弹窗显示状态发生改变
         */
    imgShowChange (val) {
      this.imgShow = val
      if (!val) {
        this.setVisibility(true)
      }
    },

    /**
         * 展示图片弹窗
         */
    showImg () {
      this.setVisibility(false)
      this.imgShow = true
    }
  }
}
</script>
<style lang='less' scoped>
.end {
    width: 100%;
    height: 464px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
}

img {
    width: 100%;
}

li {
    list-style: none;
    span {
        color: #05bac5;
        margin-left: 10px;
        cursor: pointer;
    }
    a {
        color: inherit;
    }
}

.ivu-modal-header {
    padding: 20px 16px;
}

.er {
    &-remark {
        color: #666;
        font-size: 13px;
        margin-top: -15px;
    }

    &-modal {
        .ivu-modal-header {
            border: 0;
            background-color: #fff;
        }

        .ivu-modal-body {
            padding: 0 20px;
        }
    }

    &-detail {
        padding: 10px 15px;
    }

    &-pad {
        padding: 30px 0;
    }

    &-carousel {
        min-height: 200px;
        padding: 0 20px;
        & > h2 {
            padding-bottom: 20px;
            margin-bottom: 40px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }
    }

    &-protocol {
        height: 300px;
        padding: 20px;
        margin-top: 20px;
        overflow-y: auto;
        border: 1px solid rgba(0, 0, 0, 1);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    &-required-list {
        margin-top: 10px;
        & > li {
            padding: 5px 0;
        }
    }

    &-account-type {
        padding: 10px;
        font-weight: 600;
        // color: #fff;
        // background-color: #67cff5;
        border-radius: 4px;
        margin-bottom: 0px;
        border: none;
    }

    &-result {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
        font-size: 20px;
        font-weight: bold;
    }

    &-result__icon {
        color: rgb(26, 182, 89);
        margin-right: 10px;
    }
}
</style>